Vue SVGアイコンを使う
TL;DR
アイコンフォントを利用すると使わないアイコンまでimportしてしまう。
webページで使うアイコンは少ない場合は個別にSVGアイコンを使ったほうが良い
vueでSVGアイコンを使う場合のプラクティスを書いていく
個別のアイコンをラップするicon-baseというコンポーネントを作成し、そこで設定を行い、slotを用いて個別のアイコンを表示する
上 svg 下 アイコンフォント
https://gyazo.com/5fe76c387c335ec801e1218a77e69a95
https://gyazo.com/c76f88fd6ddbfd4690276e3efc182cb1
背景
vuetifyのアイコンロードがwebページの表示を遅くしていた
アイコンセット全体をフォントとしてロードしているため、特定のアイコンのみをimportすることはできない
使いたいアイコンはせいぜい10個程度のため、全体をロードするのは無駄が多い
https://gyazo.com/cd1383f485995abad186d6f07f9ccd4e
構成
https://gyazo.com/24492c71c75985c78868b8a09266ed2d
個別のSVGアイコンをラップするIconBase.vueと個別のアイコン（IconAdd.vue,IconRemove.vue）が必要
アイコン（SVG）1つに対して1つの.vue ファイルが必要
IconBase.vue
コード
使用方法
icon-base で color やwidth height を決定し、子要素として個別のアイコンを指定する
code:usecase.vue
icon-base(color="#2196f3", height=36 width=36)
icon-remove
icon-base.vue
code:icon-base.vue
<template lang="pug">
svg(xmlns='http://www.w3.org/2000/svg', :width='width', :height='height', viewBox='0 0 24 24', :aria-labelledby='name', role='presentation') title(:id='name', lang='en') {{ name }} icon
g(:fill='color')
slot
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
name: "icon-base",
components: {}
})
export default class IconBase extends Vue {
@Prop({ default: "box" }) name!: string;
@Prop({ default: 24 }) width!: number;
@Prop({ default: 24 }) height!: number;
@Prop({ default: "#ffffff" }) color!: string;
}
</script>
<style lang="stylus" scoped>
svg
display inline-block
vertical-align baseline
</style>
icon-add.vue （個別の要素）
code:icon-add.vue
<template lang="pug">
g
path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z")
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
name: "icon-add",
components: {}
})
export default class IconAdd extends Vue {}
</script>